import { Card } from 'antd'
import { useState, useCallback } from 'react'
import { render } from 'react-dom'

import { triggerSlardar } from './fps'

setTimeout(() => {
  switch (Cypress.env().test) {
    case 'fps':
      triggerSlardar()
      break
  }
}, 1500)

const $root = document.querySelector('#app')

const App = () => {
  const [count, setCount] = useState(0)

  const onClick = useCallback(() => setCount((count) => count + 1), [])

  return (
    <div className="app">
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress {count}</p>
        <button id="test" onClick={onClick}>
          test
        </button>
      </Card>
    </div>
  )
}

render(<App />, $root!)
